<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>ajax初体验</title>
   <style>
       #content{
           width: 300px;
           height: 200px;
           background: aquamarine;
       }
   </style>
</head>
<body>
 <div id="content">

 </div>
 <button id="btn">发送</button>
<script>
    let content =document.getElementById("content");
    let btn =document.getElementById("btn");
    btn.onclick =function (){
      /**
       * 注意原生AJAX不能这样写，因为如果把open写在回调函数的前方
       * 那么回调函数内部就无法获得状态1 因为onreadystatechange回调在每次readyState
       * 发生改变之后会调用一次，如果写在回调函数后面那么状态会被设置为
       */
      /*let xhr = new XMLHttpRequest();
      xhr.open("GET","./");
      xhr.send();
        xhr.onreadystatechange = ()=>{
            if (xhr.readyState === 4){
                content.innerHTML =`<h3>${xhr.response}</h3>`
            }
        }*/
       
    }
</script>
</body>
</html>